<template>
  <view>
	<view class="search-C">
		<!-- 搜索栏 -->
		<SearchBar></SearchBar>
	</view>
    <!-- 轮播图区域 -->
    <swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" :circular="true">
      <!-- 循环渲染轮播图的 item 项 -->
      <swiper-item v-for="(item, i) in swiperList" :key="i">
        <view class="swiper-item">
			<!-- 进行图片的点击跳转 通过声明式 需要额外设置宽高 -->
			<!-- navigator 需要单独设置宽高 默认是0 -->
			<navigator class="swiper-item" :url="'/subpkg/goods-detail/goods-detail?goods_id=' + item.goods_id">
				<!-- 动态绑定图片的 src 属性 -->
				<image :src="item.image_src"></image>
			</navigator>
        </view>
      </swiper-item>
    </swiper>
	<!-- 分类导航 -->
	<view class="nav-list">
		<!-- 进行按钮跳转 -->
	   <view class="nav-item" v-for="(item, i) in navList" :key="i" @click="goCate(item)">
	     <image :src="item.image_src" class="nav-img"></image>
	   </view>
	</view>
		<!-- 楼层数据 -->
		<view class="floor">
			<view class="floor-item" v-for="(item,index) in floorList" :key="index">
				<!-- 楼层标题 -->
				<view class="floor-title">
					<image class="floor-title-img" :src="item.floor_title.image_src" ></image>
				</view>
				<!-- 楼层主要内容(5个图片) -->
				<view class="floor-content">
					<view class="left">
						<image :style="{width:item.product_list[0].image_width + 'rpx'}" :src="item.product_list[0].image_src" mode="widthFix" @click="goList(item.product_list[0])"></image>
					</view>
					<view class="right">
						<image mode="widthFix" :style="{width:e.image_width + 'rpx'}" v-for="(e,i) in item.product_list" v-if="i !== 0" :src="e.image_src" :key="i" @click="goList(e)"></image>
					</view>
				</view>
			</view>
		</view>
  </view>
</template>

<script>
import TabBarM from '@/mixins/tabbar-badge.js'
export default {
		/**
		 * 1. 获取数据
		 * 2. 渲染样式
		 * 3. 完成逻辑功能
		 * 	3.1 轮播图
		 * 		点击图片跳转到对应的商品详情页面
		 * 		主包 - 打开小程序会直接下载主包代码，默认情况下所有代码都在主包
		 * 			1. tabBar页面必须在主包内，也就是页面要创建在pages文件夹内
		 * 		分包 - 不进入页面就不会下载分包内的代码
		 * 			1. 打开pages.json文件，在跟pages数组同级的位置，声明subPackages数组，数组里一个对象代表一个分包，对象内至少要有两个属性,root代表分包根目录，pages代表分包所包含页面对象（不用我们填写内容）
		 * 			2. 在项目根目录下创建root属性同名文件夹
		 * 			3. 在分包目录上按右键选择新建页面，一定要注意创建页面时右下角是否有分包选项并将选项设置为分包的目录名称
		 * 	3.2 分类导航
		 * 		只有点击分类按钮时可以跳转到分类页面
		 * 		分类页面是tabBar页面，所以应该使用uni.switchTab({ url })方法
		 * 	3.3 楼层区域 - 点击跳转到商品列表
		 * 		在subpkg创建goods-list页面
		 * 		
		 * 		
		 */
  mixins:[TabBarM],
  data() {
    return {
      // 1. 轮播图的数据列表，默认为空数组
      swiperList: [],
	  // 获取跳转按钮数据
	  navList:[],
	  // 获取楼层数据
	  floorList: [],
    }
  },
  onLoad() {
    // 2. 在小程序页面刚加载的时候，调用获取轮播图数据的方法
    this.getSwiperList()
	this.getSwiper()
	this.getFloorList()
  },
  methods: {
    // 3. 获取轮播图数据的方法
    async getSwiperList() {
      // 3.1 发起请求
      const { data: res } = await uni.$http.get('/api/public/v1/home/swiperdata')
      // 3.2 请求失败
      if (res.meta.status !== 200) return uni.$showMsg()
      // 3.3 请求成功，为 data 中的数据赋值
      this.swiperList = res.message
    },
	// 3.1获取分类导航数据
	async getSwiper(){
		// 3.1 发起请求
		const { data: res } = await uni.$http.get('/api/public/v1/home/catitems')
		// 3.2 请求失败
		if (res.meta.status !== 200) return uni.$showMsg()
		// 3.3 请求成功，为 data 中的数据赋值
	  this.navList = res.message
	},
	// 3.2 定义获取楼层列表数据的方法
	    async getFloorList() {
	      const { data: res } = await uni.$http.get('/api/public/v1/home/floordata')
	      if (res.meta.status !== 200) return uni.$showMsg()
	      this.floorList = res.message
	 },
	// 按钮的跳转
	goCate(item){
		// 代码式跳转方法 
		// 进行判断 只跳转分类 其他不做跳转
		if(item.name === '分类'){
			// 代码式跳转方法 进行跳转
			uni.switchTab({
				// url跳转的路径地址
				url: '/pages/cate/cate'
			})
		}
	},
	// 图片的跳转
	goList(item){
		// 储存需要跳转的参数
		let url = item.navigator_url
		// 截取需要跳转的参数 split是从字符串的哪里开始分割 可以指定参数
		// 会返回两个数据 一个是分割前的 一个是分割后的
		let query = url.split('?')[1]
		// 进行代码式跳转
		// 跳转到非tabar页面
		uni.navigateTo({
			url:'/subpkg/goods-list/goods-list?' + query
		})
		console.log(query)
	},
	// 跳转到搜索
	goSearch(){

	}
  },
}
</script>

<style lang="scss">
swiper {
 height: 330rpx;

 .swiper-item,
 image {
   width: 100%;
   height: 100%;
 }
}
.nav-list {
  display: flex;
  justify-content: space-around;
  margin: 15px 0;

  .nav-img {
    width: 128rpx;
    height: 140rpx;
  }
}
.floor{
	.floor-item{
		margin-left: 10rpx;
		margin-bottom: 16rpx;
		.floor-title{
			.floor-title-img{
				width: 100%;
				height: 60rpx;
			}
		}
		.floor-content{
			display: flex;
			justify-content: space-between;
			.right{
				display: flex;
				justify-content: space-around;
				flex-wrap: wrap;
			}
		}
	}
	.search-C{
		position: sticky;
		left: 0;
		top: 0;
		z-index: 9999999;
	}
}
</style>
